/* eslint-disable jsx-a11y/tabindex-no-positive */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Breadcrumb, Row, Col, Input, Tabs,Button  } from 'antd';

import FileList from '../FileList/FileList';
import MyShare from '../MyShare/MyShare';
// import ListSecret from '../FileListSecret/FileList';
import './Files.scss';
import API from "../../../api/files";

const { Search } = Input;
const TabPane = Tabs.TabPane;
const classNames = require('classnames');

const labels = {
  1: '我的文档',
  2: '团队文档',
  3: '我的分享',
};

class Files extends Component {
    static defaultProps = {
        fileId: '',
      }

    constructor (props) {
        super(props);
        this.state = {
            visible: false,
            keyword: '',
            tabIndex: 1,
            titleName:[],
            lastName:'',
            currentId:'',
            searchData:null,
            fileId:props.fileId
        };
}

  componentWillReceiveProps (nextProps) {
    const { fileId } = nextProps;
    this.setState({
      visible: nextProps.visible,
      fileId,
      type:'personal'
    });
    Tabs.activeKey = this.props.clickedTabIdx;
  }

  handleClickTab = (key) => {
      var fileId = this.state.fileId;
      const accountId = JSON.parse(window.sessionStorage.getItem('account')).id;
      if(this.state.tabIndex=='2' && key=='1'){
               var id = accountId;
                this.setState({
                    tabFileId:id,
                    fileId:''
                });
            }else if(this.state.tabIndex=='1' && key=='2'){
                var id="teams";
                this.setState({
                    tabFileId:id,
                    fileId:''
                });
            }else if(this.state.tabIndex=='3' && key=='2'){
                var id = 'teams';
                this.setState({
                    tabFileId:id,
                    fileId:''
                });
            }else if(this.state.tabIndex=='3' && key=='1'){
                var id = accountId;
                this.setState({
                    tabFileId:id,
                    fileId:''
                });
            };
            this.setState({
                tabIndex: key,
                titleName:'',
                lastName:'',
                searchData:null,
            });
  }

    handleName = (name) => {
        if(name == undefined){
            var lastName ="";
               this.setState({
                titleName: [],
                lastName:lastName,
            });
        }else{
            if(name.length>0){
                for(var i=0;i<name.length;i++){
                    var lastName = name[name.length-1].nickname;
                  }
                  this.setState({
                      titleName: name,
                      lastName:lastName,
                  });
            }else{
               var lastName ="";
               this.setState({
                titleName: [],
                lastName:lastName,
            });
            }
        }
    }


    handleClickBack = (id) => {
        this.child.closeTitle(id);
    }

    // handleClickBackTitle = (id) => {
    //     this.child.closeBackTitle(id);
    // }

    onRef = (ref) => {
        this.child = ref
    }

  render () {
    var titleName = this.state.titleName;
    const className = classNames('files-view page', { hide: !this.state.visible });

    return (
      <div className={className}>
        <header>
            <div style={{marginLeft:25,marginTop:20}}>
          <Breadcrumb>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>{labels[this.state.tabIndex]}</Breadcrumb.Item>
              {  
                  titleName.length > 0?
                  titleName.map((item)=>{
                  return(<Breadcrumb.Item>{item.nickname}</Breadcrumb.Item>)
                 }):<Breadcrumb.Item></Breadcrumb.Item>
               }
          </Breadcrumb>
          <div className="page-title">{this.state.lastName?this.state.lastName:labels[this.state.tabIndex]}</div>
              {/* <Row>
                <Col span={12}>
                  <Search placeholder="文件名/文件夹名/标签/客户名称" enterButton="查询" size="large" onSearch={this.handleSearch} />
                </Col>
              </Row> */}
            </div>
            <div
                style={{
                    backgroundColor: '#eceff3', flex: 1,
                }}
            >
                <Tabs
                    defaultActiveKey="1" type="card"
                    onTabClick={this.handleClickTab}
                    style={{ height: '100%' }}
                >
                    <TabPane tab="我的文档" key="1">
                        <FileList
                            searchData={this.state.searchData}
                            tabFileId={this.state.tabFileId}
                            fileId={this.state.fileId}
                            tabIndex={1}
                            keyword={this.state.keyword}
                            onRef={this.onRef}
                            returnName={this.handleName}
                        />
                    </TabPane>
                    <TabPane tab="团队文档" key="2">
                        <FileList
                            searchData={this.state.searchData}
                            tabFileId={this.state.tabFileId}
                            fileId={this.state.fileId}
                            tabIndex={2}
                            keyword={this.state.keyword}
                            onRef={this.onRef}
                            returnName={this.handleName}
                        />
                    </TabPane>
                    <TabPane tab="我的分享" key="3">
                        <MyShare />
                    </TabPane>
                </Tabs>
            </div>
        </header>
      </div>
    );
  }
}

Files.propTypes = {
  visible: PropTypes.bool.isRequired,
  fileId: PropTypes.string,
  clickedTabIdx: PropTypes.number.isRequired,
};

const mapStateToProps = state => ({
  clickedTabIdx: state.file.clickedTabIdx,
  fileId: state.file.currentId,
});

export default connect(mapStateToProps)(Files);
